<?php
/**
 * Created by PhpStorm.
 * User: dreamy
 * Date: 2019-06-22
 * Time: 09:31
 */
use yii\helpers\Html;
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账本管理-公司账</title>
    <meta name="keywords" content="<?= $this->params['seoData']['keywords'] ?>">
    <meta name="description" content="<?= $this->params['seoData']['description'] ?>">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/global.css">
    <?php echo $this->render('../public/ele.php')?>
</head>
<body id="app">
<?=Html::cssFile('@web/static/css/index.css')?>
<!--引入页面头部-->
<?php echo $this->render('../public/header.php')?>
<?=Html::jsFile('@web/static/js/jquery-3.4.1.min.js')?>
<?=Html::jsFile('@web/static/js/china-area-data.js?v=1')?>

<style>
    #app{
        background: #f9f9f9ee;
    }
     [v-cloak]{
         display: none
     }
    .tallyT{
        color: #0a73bb;
    }
</style>
<div id="ContainerMain" v-cloak>
    <div style="width: 1000px;margin: 100px auto;">
        <el-row>
            <p style="line-height: 30px;font-size: 18px;color:#1f2f3d">账本管理
                <span style="float: right">
                    <el-button type="primary" size="mini" @click="tallyAddDialog">添加账本</el-button>
                </span>
            </p>
        </el-row>
        <el-divider></el-divider>
        <el-table stripe :data="tallyData" border>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="账本名称">
                <template slot-scope="scope">
                    <a :href="'/tally?id='+scope.row.id" class="tallyT">{{ scope.row.title }}</a>
                </template>
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="地区">
                <template slot-scope="scope">
                    {{ scope.row.province }}-{{ scope.row.city }}
                </template>
            </el-table-column>
            <el-table-column
                    prop="created_time"
                    label="创建时间" sortable>
            </el-table-column>
            <el-table-column
                    prop="is_default"
                    label="默认账本">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_default == 1">是</span>
                    <span v-else>否
                        <a href="javascript:;" @click="setDefault(scope.$index,scope.row)" style="float:right"><el-button size="mini">设为默认</el-button></a>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit"  @click="editRow(scope.$index,scope.row)">
                        修改</el-button>
                    <el-button type="danger" size="mini" icon="el-icon-delete"  @click="deleteRow(scope.$index,scope.row)">
                        删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <p style="margin-top: 10px;text-align: center">
        <el-pagination
                background
                layout="prev, pager, next, total"
                :page-size="logPageSize"
                :total="logTotalCount"
                @current-change="handlePageChange"
        >
        </el-pagination>
    </p>

    <!--账本新增 编辑表单框-->
    <el-dialog :visible.sync="tallyDialog" width="700px">
        <h3 slot="title">{{ tallyDialogTitle }}：{{ tallyForm.title }}</h3>
        <el-form ref="form" :rules="tallyRules" :model="tallyForm" label-width="80px">
            <el-form-item v-if="tallyForm.id" label="账本ID" prop="id">
                <el-input :value="tallyForm.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="账本名称" prop="title" required>
                <el-input autocomplete="off" v-model="tallyForm.title" required></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input autocomplete="off" v-model="tallyForm.company_title"></el-input>
            </el-form-item>
            <el-form-item label="所在地">
                <el-cascader
                        size="large"
                        :options="areaOptions"
                        v-model="areaSelectedOptions"
                        @change="handleAreaChange"
                >
                </el-cascader>
            </el-form-item>
            <el-form-item label="财务人员">
                <el-radio-group v-model="tallyForm.financial_type">
                    <el-radio :label="1">仅有会计</el-radio>
                    <el-radio :label="2">会计与出纳</el-radio>
                </el-radio-group>
                <p>
                    <el-alert v-if="tallyForm.financial_type == '1'"
                              :closable="false" class="nopad"
                              title="账单不会进入审核流程"
                              type="info">
                    </el-alert>
                    <el-alert v-if="tallyForm.financial_type == '2'"
                              :closable="false" class="nopad"
                              title="会计录入账单会进入审核流程，出纳角色或管理员可进行审核"
                              type="info">
                    </el-alert>
                </p>
            </el-form-item>
            <el-form-item label="账本备注">
                <el-input autocomplete="off" v-model="tallyForm.memo"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="tallyDialog = false">取 消 </el-button>
            <el-button type="primary" @click="handleTallyForm">确 定</el-button>
        </div>
    </el-dialog>

</div>

<div style="height: 100px;"></div>
<?php echo $this->render('../public/footer.php')?>

<script type="application/javascript">
    let loginToken  =  localStorage.getItem('loginToken');
    new Vue({
        el:'#ContainerMain',
        data() {
            return {
                tallyData:[],
                logPageSize:100,
                logTotalCount:0,
                currentPage:1,
                tallyDialog:false,
                tallyDialogTitle:'修改账本',
                areaOptions:provinceAndCityData,
                industryOptions:[],
                areaSelectedOptions: [],
                tallyForm:{},
                tallyRules: {
                    title: [
                        { required: true, message: '请输入账本名称', trigger: 'blur' }
                    ],
                },
            }
        },
        computed: {},
        mounted:function() {
            if(!logined){
                location.href='/login'
            }
            this.getTallyList(1)
            this.getIndustryOptions()
        },
        methods:{
            handlePageChange(currentPage){
                this.currentPage = currentPage
                // 处理日志记录分页切换
                this.getTallyList(currentPage)
            },
            getIndustryOptions(){
                let that = this
                axios.get('/api/industry/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.industryOptions = res.data.data
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            getTallyList(page){
                let that = this
                axios.get('/api/tally/lists',{
                    method: 'get',
                    headers: {'token': loginToken},
                    params: {
                        page:page || 1
                    }
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.tallyData = res.data.data
                        // that.logPageSize = res.data.extra.pageSize
                        that.logTotalCount = res.data.data.length
                    }else{
                        that.$emit('show_tips','error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            tallyAddDialog(){
                this.tallyForm = {
                    financial_type:1,
                } //添加表单置空
                this.tallyDialogTitle = '新增账本'
                this.tallyDialog = true;
            },
            editRow(ix,row){
                this.tallyForm = JSON.parse(JSON.stringify(row))
                this.tallyDialog = true
                try {
                    let provinceP = TextToCode[row['province']]
                    let cityP = provinceP[row['city']]
                    this.areaSelectedOptions = [provinceP.code,cityP.code]
                }catch (e) {
                    console.log(e);
                }
            },
            deleteRow(index,row){
                let that = this
                this.$confirm('确定要删除该账本？【'+ row.title+'】', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        if(action == 'confirm') {
                            // 执行删除操作
                            let postUrl = '/api/tally/del'
                            axios.post(postUrl,{id:row.id},{
                                headers: {'token': loginToken},
                            }).then(function(res) {
                                if(res.data.status == 'success'){
                                    that.showTips('success','操作成功~')
                                    that.tallyData.splice(index, 1);
                                }else{
                                    that.showTips('error',res.data.error_message)
                                }
                            })
                        }
                    }
                });
            },
            setDefault(ix,row){
                let that = this
                axios.post('/api/tally/set-default',
                    {tally_id:row.id,},
                    {headers: {'token': loginToken}
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.getTallyList(this.currentPage)
                    }else{
                        that.$emit('show_tips','error','解析数据失败:'+res.data.error_message)
                    }
                })
            },
            handleAreaChange(value){
                console.log(this.areaSelectedOptions)
                // 省
                console.log(CodeToText[value[0]])
                // 市
                console.log(CodeToText[value[1]])
                // 区域转地址码convertTextToCode(CodeToText[selectedOptions3[0]]
                console.log(value)
            },
            handleTallyForm(){
                // 处理新增或者添加操作
                let that = this
                let postUrl;
                if(that.tallyForm.id) {
                    postUrl = '/api/tally/edit'
                }else{
                    postUrl = '/api/tally/add'
                }
                that.tallyForm.province = CodeToText[this.areaSelectedOptions[0]] ; //转省
                that.tallyForm.city = CodeToText[this.areaSelectedOptions[1]] ;//转市
                axios.post(postUrl,that.tallyForm,{
                    headers: {'token': loginToken},
                }).then(function(res) {
                    if(res.data.status == 'success'){
                        that.showTips('success','操作成功~')
                        that.getTallyList()
                        that.currentTally = that.tallyForm
                    }else{
                        that.showTips('error','解析数据失败:'+res.data.error_message)
                    }
                    that.tallyDialog = false;
                })
            },
            showTips(type,msg){
                this.$message({
                    type: type,
                    message: msg
                });
            }
        },
    })
</script>
</body>
</html>
